<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />



  <meta name="description" content="面试之道 -- JS底层"/>




  <meta name="keywords" content="面试," />





  <link rel="alternate" href="/default" title="刘粉丝来了">






<link rel="canonical" href="http://yoursite.com/2020/05/03/Interview/"/>


<meta name="description" content="什么是原型？prototype就是原型，他是一个对象，我们也称他为原型对象。 原型的作用就是共享方法，不会重新开辟一个堆区。 什么是原型链？ 原型链是由原型对象组成的，每个对象都有 proto 属性，指向创建该对象的构造函数的原型，proto将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限对象链。 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输">
<meta property="og:type" content="article">
<meta property="og:title" content="面试之道 -- JS底层">
<meta property="og:url" content="http://yoursite.com/2020/05/03/Interview/index.html">
<meta property="og:site_name" content="刘粉丝来了">
<meta property="og:description" content="什么是原型？prototype就是原型，他是一个对象，我们也称他为原型对象。 原型的作用就是共享方法，不会重新开辟一个堆区。 什么是原型链？ 原型链是由原型对象组成的，每个对象都有 proto 属性，指向创建该对象的构造函数的原型，proto将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限对象链。 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-05-03T02:25:46.000Z">
<meta property="article:modified_time" content="2020-05-07T10:32:46.638Z">
<meta property="article:author" content="刘粉丝来了">
<meta property="article:tag" content="面试">
<meta name="twitter:card" content="summary">


<link rel="stylesheet" type="text/css" href="/css/style.css?v=1.1" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>





<script type="text/javascript">
  var themeConfig = {
    fancybox: {
      enable: false
    },
  };
</script>




  



    <title> 面试之道 -- JS底层 - 刘粉丝来了 </title>
  <meta name="generator" content="Hexo 4.2.0"></head>

  <body>
    <div id="page">
      <header id="masthead"><div class="site-header-inner">
    <h1 class="site-title">
        <a href="/." class="logo">刘粉丝来了</a>
    </h1>

    <nav id="nav-top">
        
            <ul id="menu-top" class="nav-top-items">
                
                    <li class="menu-item">
                        <a href="/">
                            
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li class="menu-item">
                        <a href="/archives">
                            
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li class="menu-item">
                        <a href="/tags">
                            
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li class="menu-item">
                        <a href="/about">
                            
                            
                                About
                            
                        </a>
                    </li>
                
            </ul>
        
  </nav>
</div>

      </header>
      <div id="content">
        
    <div id="primary">
        
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          面试之道 -- JS底层
        
      </h1>

      <time class="post-time">
          5月 03 2020
      </time>
    </header>



    
            <div class="post-content">
            <h3 id="什么是原型？"><a href="#什么是原型？" class="headerlink" title="什么是原型？"></a><strong>什么是原型？</strong></h3><p><code>prototype</code>就是原型，他是一个对象，我们也称他为原型对象。 原型的作用就是共享方法，不会重新开辟一个堆区。</p>
<h3 id="什么是原型链？"><a href="#什么是原型链？" class="headerlink" title="什么是原型链？"></a><strong>什么是原型链？</strong></h3><p> <strong>原型链是由原型对象组成的</strong>，每个对象都有 <strong>proto</strong> 属性，指向创建该对象的构造函数的原型，<strong>proto</strong>将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限对象链。 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶层的原型对象<code>Object.prototype</code>,如果还是没找到，就输出<code>undefined</code>。</p>
<h3 id="什么是执行上下文（EC）？"><a href="#什么是执行上下文（EC）？" class="headerlink" title="什么是执行上下文（EC）？"></a><strong>什么是执行上下文（EC）？</strong></h3><ul>
<li>分为全局执行上下文以及函数执行上下文</li>
<li>代码执行过程，创建全局上下文，全局执行上下文由上而下执行遇到函数时，函数执行上下文被压到执行栈顶层。</li>
<li>函数执行上下文被激活，开始执行函数中的代码，全局上下文被挂起。</li>
<li>函数执行完后，函数执行上下文被移出执行栈，控制权交还全局上下文，继续执行代码。</li>
</ul>
<h3 id="什么是作用域？"><a href="#什么是作用域？" class="headerlink" title="什么是作用域？"></a><strong>什么是作用域？</strong></h3><p>作用域可以理解为当前上下文声明的变量和声明的作用范围。</p>
<h3 id="什么是作用域链？"><a href="#什么是作用域链？" class="headerlink" title="什么是作用域链？"></a><strong>什么是作用域链？</strong></h3><p>在执行上下文中访问到父级甚至全局的变量，这就是作用域链的功劳，作用域链就是一组对象列表，包含父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数。</p>
<h3 id="什么是闭包？"><a href="#什么是闭包？" class="headerlink" title="什么是闭包？"></a><strong>什么是闭包？</strong></h3><p>闭包属于一种特殊的作用域。称为静态作用域。它的定义可以理解为：父函数被销毁的情况下，返回的子函数中仍保持着父函数的作用域链，因此可以继续访问到父级的变量对象，这样的函数被称为闭包。</p>
<h3 id="Event-loop-执行栈"><a href="#Event-loop-执行栈" class="headerlink" title="Event loop 执行栈"></a><strong>Event loop 执行栈</strong></h3><p>当我们调用一个方法的时候，javascript会生成一个与这个方法对应的执行环境，又叫执行上下文（context），这个执行环境中保存着该方法的私有作用域，上层作用域(作用域链),方法的参数，以及这个作用域中定义的变量和this的指向，而当一系列方法被依次调用的时候，由于javascript是单线程的，这些方法就会按顺序被排列在一个单独的地方，这个地方就是所谓的执行栈。</p>
<h3 id="Event-loop-任务队列"><a href="#Event-loop-任务队列" class="headerlink" title="Event loop 任务队列"></a><strong>Event loop 任务队列</strong></h3><p>事件队列是一个存储着<code>异步任务</code>的队列，其中的任务严格按照时间先后顺序执行，排在队头的任务将会率先执行，而排在队尾的任务会最后执行。事件队列每次仅执行一个任务，在该任务执行完毕后，在执行下一个任务。执行栈是一个类似于函数调用栈的运行容器，当执行栈为空时，js引擎便检查事件队列，如果事件队列不为空的话，事件队列便将第一个任务压入执行栈中运行。</p>
<h3 id="Event-loop-事件循环"><a href="#Event-loop-事件循环" class="headerlink" title="Event loop 事件循环"></a><strong>Event loop 事件循环</strong></h3><p>注意到了吗，在异步代码完成后仍有可能要在一旁等待，因为此时程序可能在做其他的事情，等到程序空闲下来才有时间去看那些异步已经完成了，所以javascript有一套机制去处理同步和异步操作，那就是事件循环( Event loop )</p>
<h3 id="Event-loop-事件循环过程"><a href="#Event-loop-事件循环过程" class="headerlink" title="Event loop 事件循环过程"></a><strong>Event loop 事件循环过程</strong></h3><ul>
<li>所有同步任务都在主线程上执行，形成一个执行栈</li>
<li>而异步任务会被放置到 Task Table ，也就是上图中异步处理模块，当异步任务有了运行结果，就将该函数移入任务队列。</li>
<li>一旦执行栈中的所有同步任务执行完毕，引擎就会读取任务队列，然后将任务队列中的第一个任务压入执行栈中运行。</li>
<li>主线程不断重复第三步，也就是<code>只要主线程空了，就会去读取任务队列</code>该过程不断重复，这就是所谓的<code>事件循环</code>。</li>
</ul>
<h3 id="this的指向问题"><a href="#this的指向问题" class="headerlink" title="this的指向问题"></a><strong>this的指向问题</strong></h3><ul>
<li>对象调用谁，this指向该对象( 前边谁调用this就指向谁 )</li>
<li>直接调用的函数，this指向的是全局window对象</li>
<li>通过new的方式，this被绑定在新创建的对象上。</li>
</ul>
<h3 id="事件循环"><a href="#事件循环" class="headerlink" title="事件循环"></a><strong>事件循环</strong></h3><p>在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去，当执行栈为空的时候，主线程会首先查看微任务中的事件，如果微任务不是空的那么执行微任务中的事件，如果没有在宏任务中取出最前面的一个事件。把对应的回调加入当前执行栈…如此反复，进入循环。</p>
<h3 id="遇到过跨域吗跨域？平常是怎么解决跨域的？"><a href="#遇到过跨域吗跨域？平常是怎么解决跨域的？" class="headerlink" title="遇到过跨域吗跨域？平常是怎么解决跨域的？"></a><strong>遇到过跨域吗跨域？平常是怎么解决跨域的？</strong></h3><p>平常我有两种解决跨域的方法：</p>
<ul>
<li>CORS( 跨域资源共享 )允许浏览器向跨域服务器发出请求，从而克服跨域问题。浏览器会自动向请求头添加origin字段，表明当前请求源。服务器端需要设置响应头的Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Menthods等字段，指定允许的方法，头部，源等信息。</li>
<li>Webpack配置代理,在webpack.config.js文件中配置：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">devServer&#123;</span><br><span class="line">    proxy:&#123;</span><br><span class="line">        <span class="string">'/api'</span>:&#123;</span><br><span class="line">            target:<span class="string">'http:baidu.com'</span>,</span><br><span class="line">            pathRewrite:&#123;</span><br><span class="line">                <span class="string">'/api'</span>:<span class="string">'/api'</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>

            </div>
          

    
      <footer class="post-footer">
		
		<div class="post-tags">
		  
			<a href="/tags/%E9%9D%A2%E8%AF%95/">面试</a>
		  
		</div>
		

        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2020/05/03/resume/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">测试</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2020/04/21/watcher/">
        <span class="next-text nav-default">依赖收集与派发更新</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

        
  <div class="comments" id="comments">
    
  </div>


      </footer>
    
  </article>


    </div>

      </div>

      <footer id="colophon"><script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span class="copyright-year" style="width:100%; display:flex; justify-content: space-between;">
    <span>
        
        &copy;
    
        2014 -
    
    2020
    <span class="footer-author">刘粉丝来了.</span>
    <span class="power-by">
        由 <a class="hexo-link" href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> and <a class="theme-link" href="https://github.com/frostfan/hexo-theme-polarbear" target="_blank" rel="noopener">Polar Bear</a> 强力驱动
    </span>
    </span>
    <span id="busuanzi_container_site_pv">
        本站总访问量<span id="busuanzi_value_site_pv" style="color:red">24280</span>次
    </span>
</span>



      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>
    


    




  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  

    <script type="text/javascript" src="/js/src/theme.js?v=1.1"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=1.1"></script>


  </body>
</html>
